<template>
  <a-modal class="common-modal" :title="$t('other.basicProcess')" :footer="null" :width="1000" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <div class="p-20">
        <a-form layout="inline">
          <a-form-item :label="$t('basicData.process')">
            <a-input v-model:value.trim="queryParam.universal" :placeholder="$t('basicData.pleaseInputProcessName')" @keyup.enter="loadData" allowClear />
          </a-form-item>
          <a-form-item :label="$t('basicData.section')">
            <a-select v-model:value="queryParam.section" :placeholder="$t('common.pleaseSelect')" allowClear>
              <a-select-option v-for="(item,index) in sectionList" :value="item.name" :key="index">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('common.date')">
            <a-range-picker v-model:value="queryParam.time" :placeholder="[$t('common.startDate'), $t('common.endDate')]" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
          <a-form-item>
            <a-space>
              <a-button type="primary" @click="loadData">{{$t('common.see')}}</a-button>
              <a-button @click="searchReset">{{$t('common.reset')}}</a-button>
            </a-space>
          </a-form-item>
        </a-form>
        <a-table class="pt-20" :loading="loading" rowKey="id" bordered size="small" :dataSource="dataSource" :columns="columns" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, fixed: 'left'}" :pagination="false" :scroll="{x: 900, y: 600}">
        </a-table>
      </div>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { formatTime, filterObj, formatSeconds } from '@/utils'
import { cloneDeep } from 'lodash'
import moment from 'moment'
import axios from '@/utils/request'
export default {
  name: 'processModal',
  mixins: [ListMixinPm],
  props: {
    sectionList: {
      require: true,
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      url: {
        list: '/api/basic/basic-process/list',
        save: '/api/basic/style-process/add-basic-process'
      },
      columns: [
        {
          title: this.$t('common.sequenceNo'), dataIndex: 'index', key: 'index', align: 'center', width: 60,
          customRender: ({ index }) => {
            return index + 1
          }
        },
        { title: this.$t('basicData.processCode'), dataIndex: 'code', key: 'code', align: 'center', width: 150 },
        { title: this.$t('basicData.sortNo'), dataIndex: 'sortField', key: 'sortField', align: 'center', width: 90 },
        { title: this.$t('basicData.processNo'), dataIndex: 'processNo', key: 'processNo', align: 'center', width: 90 },
        { title: this.$t('basicData.processCodes'), dataIndex: 'processCode', key: 'processCode', align: 'center', width: 100 },
        { title: this.$t('basicData.processNames'), dataIndex: 'name', key: 'name', align: 'center', width: 100 },
        { title: this.$t('menu.basic:section'), dataIndex: 'section', key: 'section', align: 'center', width: 90 },
        {
          title: this.$t('basicData.standardTime'), dataIndex: 'standardSeconds', key: 'standardSeconds', align: 'center', width: 150,
          customRender: ({ record }) => {
            return record.standardSeconds && formatSeconds(record.standardSeconds)
          }
        },
        { title: this.$t('basicData.priceYuan'), dataIndex: 'labourCost', key: 'labourCost', align: 'right', width: 100 },
        {
          title: this.$t('common.createTime'), dataIndex: 'createTime', key: 'createTime', align: 'center', width: 170,
          customRender: ({ text }) => {
            return formatTime(text, 'YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          title: this.$t('common.updateTime'), dataIndex: 'updateTime', key: 'updateTime', align: 'center', width: 170,
          customRender: ({ text }) => {
            return formatTime(text, 'YYYY-MM-DD HH:mm:ss')
          }
        }
      ],
      styleId: null,
      visible: false,
      confirmLoading: false,

    }
  },
  methods: {
    getQueryParams () {
      if (!this.styleId) {
        return false
      } else {
        let param = cloneDeep(this.queryParam)
        // // 时间格式化
        if (this.queryParam.time && this.queryParam.time.length) {
          param.startTime = moment(this.queryParam.time[0]).startOf('day').valueOf()
          param.endTime = moment(this.queryParam.time[1]).endOf('day').valueOf()
        }
        delete param.time
        param.styleId = this.styleId
        return filterObj(param)
      }
    },
    open (styleId) {
      this.styleId = styleId
      this.loadData()
      this.visible = true
    },
    async handleOk () {
      if (!this.selectionRows.length) {
        this.$message.warning(this.$t('other.pleaseSelectBaseProcess'))
      } else {
        let params = cloneDeep(this.selectionRows)

        params.forEach(item => {
          item.styleId = this.styleId
          delete item.id
        })
        const res = await axios.postAction(this.url.save, params)

        if (res.success) {
          this.$emit('ok')
          this.handleCancel()
        }
      }
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.styleId = null
      this.selectedRowKeys = []
      this.queryParam = {}
    }
  }

}
</script>